<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd" >
<!-- Register Flyout component -->
<%@ Register TagPrefix="obout" Namespace="OboutInc.Flyout2" Assembly="obout_Flyout2_NET"%>


<html xmlns="http://www.w3.org/1999/xhtml" >

	<head>
        <title>Map Tooltip</title>       
	
	    <style type="text/css">
	        .box
	        {
	            width:357px;
	            height:165px;
	            background-image:url(box.png);
	            background-repeat:no-repeat;
	            overflow:hidden;
	            padding-left:10px;
	            padding-right:100px;
	            padding-top:10px;
	            position:absolute;
	        }
	        .placeText
	        {
	            font-family:Arial;
	            font-size:12pt;
	            font-weight:bold;
	        }
	        .tdText
	        {
	            font-family:Arial;
	            font-size:10pt;
	        }
	    </style>
	
	</head>
	<body style="margin:auto">
	<form runat="server" id="form1">
        <div style="padding:5px;">
           <img id="theMap" src="map.gif" usemap="#camera" style="border:0px;" />
           <map name="camera">
                <area id="c1" shape="rect" coords="149,164,173,185" style="cursor:pointer;"/>
                <area id="c2" shape="rect" coords="177,265,202,296" style="cursor:pointer;"/>
                <area id="c3" shape="rect" coords="283,169,308,190" style="cursor:pointer;"/>
                <area id="c4" shape="rect" coords="307,312,332,332" style="cursor:pointer;"/>
           </map>           
           <obout:Flyout runat="server" ID="c1_flyout" AttachTo="theMap[c1]" NoneEffect="true" Position="ABSOLUTE" RelativeLeft="-75" RelativeTop="-150" OpenTime="0" DelayTime="0" CloseTime="0">                   
                    <div class="box">
                        <table style="width:250px" cellpadding="0" cellspacing="0">
                            <tr>
                                <td class="placeText">Madison, WI</td>
                                <td align="right" valign="top"><img src="close.gif" onclick="<%=c1_flyout.getClientID()%>.Close();" style="cursor:pointer;"></td>
                            </tr>
                            <tr>
                                <td rowspan="2" class="tdText">
                                    <a href="#">Zoom In</a> to select street view location
                                </td>
                            </tr>
                        </table>
                    </div>
           </obout:Flyout>
           
           <obout:Flyout runat="server" ID="c2_flyout" AttachTo="theMap[c2]" NoneEffect="true" Position="ABSOLUTE" RelativeLeft="-75" RelativeTop="-150">                   
                    <div class="box">
                        <table style="width:250px" cellpadding="0" cellspacing="0">
                            <tr>
                                <td class="placeText">Rockford, IL</td>
                                <td align="right" valign="top"><img src="close.gif" onclick="<%=c2_flyout.getClientID()%>.Close();" style="cursor:pointer;"></td>
                            </tr>
                            <tr>
                                <td rowspan="2" class="tdText">
                                    <a href="#">Zoom In</a> to select street view location
                                </td>
                            </tr>
                        </table>
                    </div>
           </obout:Flyout>

           <obout:Flyout runat="server" ID="c3_flyout" AttachTo="theMap[c3]" NoneEffect="true" Position="ABSOLUTE" RelativeLeft="-75" RelativeTop="-150">                   
                    <div class="box">
                        <table style="width:250px" cellpadding="0" cellspacing="0">
                            <tr>
                                <td class="placeText">Milwaukee, WI</td>
                                <td align="right" valign="top"><img src="close.gif" onclick="<%=c2_flyout.getClientID()%>.Close();" style="cursor:pointer;"></td>
                            </tr>
                            <tr>
                                <td rowspan="2" class="tdText">
                                    <a href="#">Zoom In</a> to select street view location
                                </td>
                            </tr>
                        </table>
                    </div>
           </obout:Flyout>

           <obout:Flyout runat="server" ID="c4_flyout" AttachTo="theMap[c4]" NoneEffect="true" Position="ABSOLUTE" RelativeLeft="-75" RelativeTop="-150">                   
                    <div class="box">
                        <table style="width:250px" cellpadding="0" cellspacing="0">
                            <tr>
                                <td class="placeText">Chicago, IL</td>
                                <td align="right" valign="top"><img src="close.gif" onclick="<%=c4_flyout.getClientID()%>.Close();" style="cursor:pointer;"></td>
                            </tr>
                            <tr>
                                <td rowspan="2" class="tdText">
                                    <a href="#">Zoom In</a> to select street view location
                                </td>
                            </tr>
                        </table>
                    </div>
           </obout:Flyout>
           
           
                
        </div>
    </form>        
	</body>
</html>
